<template>
  <div class="login-container">
    <div class="background-image">
      <img src="@/assets/img/login/background.png" alt="Background" />
    </div>
    <div class="auth-form-wrapper">
      <div class="auth-form">
        <h2>用户登录</h2>
        <form>
          <div class="form-group horizontal">
            <label for="loginAccount">账号</label>
            <input
              id="loginAccount"
              type="text"
              v-model="admin.username"
              placeholder="请输入用户名或邮箱"
              required
            >
          </div>
          <div class="form-group horizontal">
            <label for="loginPassword">密码</label>
            <input
              id="loginPassword"
              type="password"
              v-model="admin.password"
              placeholder="请输入密码"
              required
            >
          </div>
          <div class="form-options">
            <label class="remember-me">
              <input type="checkbox" v-model="admin.remember"> 记住我
            </label>
            <router-link to="/forgot-password" class="forgot-password">忘记密码？</router-link>
          </div>
          <button type="button" class="submit-btn" @click="handleSubmit">登 录</button>
        </form>
        <p class="switch-text">
          还没有账号？<router-link to="/register">立即注册</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  data() {
    return {
      admin: {
        username: '',
        password: '',
        email: '',
        remember: false
      }
    }
  },
  methods: {
    handleSubmit() {
      if (!this.admin.username) {
        alert('请输入账号');
        return;
      }
      
      if (!this.admin.password) {
        alert('请输入密码');
        return;
      }
      
      console.log('登录信息:', this.admin);
      request.post("/users/login" ,this.admin).then(res =>{
        if(res.code === '200'){
          this.$message({
            message: '登录成功',
            type: 'success'
          })
		  // 转换成字符串保存到localStorage里面
		  localStorage.setItem("user",JSON.stringify(res.data));
          this.$router.push("/")
          alert(`登录成功，欢迎回来！`);
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-form-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding-right: 100px;
}

.auth-form {
  background: rgba(255, 255, 255, 0.95);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
}

.auth-form h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group.horizontal {
  display: flex;
  align-items: center;
}

.form-group.horizontal label {
  flex: 0 0 80px;
  margin-bottom: 0;
  margin-right: 10px;
  color: #555;
  font-weight: 500;
}

.form-group.horizontal input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background-color:  #cfcfcf;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
  font-weight: 500;
}

.submit-btn:hover {
  background-color:#ff5500;
}

.switch-text {
  text-align: center;
  margin-top: 25px;
  color: #666;
}

.switch-text a {
  color: #4a6bdf;
  text-decoration: none;
  font-weight: 500;
}

.switch-text a:hover {
  text-decoration: underline;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
}

.remember-me {
  display: flex;
  align-items: center;
  color: #666;
}

.remember-me input {
  margin-right: 8px;
}

.forgot-password {
  color: #4a6bdf;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}
</style>